<template>
  <AplidCharts type="pie" :option="option"></AplidCharts>
</template>

<script setup lang="ts">
import AplidCharts from "@/components/AplidCharts/index.vue";
type Props = {
  data?:any,
};
const props = withDefaults(defineProps<Props>(), {
  data: [],
});
const colors = [
    "#05CFF7FF",
    "#177BEE",
    "#FDBD00",
    "#B4F1FD",

    "#73FFB5",
    "#ea9b6d",
    // "#ECB205FF",
    // "#9C30F1FF",
    // "#7BC17FFF",
    // "#E8BA65FF",
  ];

  let sourceData = props.data

  const total = sourceData.reduce((num, item) => {
    num += item.value;
    return num;
  }, 0);

  // // 内环间隔距离
  const inSplitWidth = 3;
  // // // 为了实现内环间隔距离，需要额外插入的数值。200 只是个系数，值越大，单位间隔的距离越小。
  const inSplitValue = Math.floor(total / (300 / inSplitWidth));

  // 外环间隔比内环间隔大的值
  const itemSplitWidth = 2;
  // 外环间隔距离
  const outSplitWidth = inSplitWidth + itemSplitWidth;
  // 为了实现外环间隔距离，需要额外插入的数值。
  const outSplitValue = Math.floor(total / (300 / outSplitWidth));

  // 内环数据的总数
  const valueTotal = total + inSplitValue * sourceData.length;

  function getTextAngle(currentAngle, angle) {
    currentAngle = currentAngle + angle;
    if (currentAngle <= 90) {
      return -currentAngle;
    } else if (currentAngle <= 180 && currentAngle > 90) {
      return 180 - currentAngle;
    } else if (currentAngle < 270 && currentAngle > 180) {
      return 180 - currentAngle;
    } else if (currentAngle < 360 && currentAngle >= 270) {
      return 360 - currentAngle;
    }
  }

  const itemReduced = outSplitValue - inSplitValue;
  // 外环数据
  const outValueData = sourceData.reduce((arr, item, index) => {
    const currentTotal = arr.reduce((total, item) => {
      total += item.value;
      return total;
    }, 0);

    const currentAngle = 360 * (currentTotal / valueTotal);
    const angle = (360 * (item.value / valueTotal)) / 2;

    arr.push(
      {
        name: item.name,
        value: item.value,
        label: {
          color: "rgb(160, 60, 60)",
          position: "inside",
          align: "center",
          rotate: getTextAngle(currentAngle, angle),
        },
      },
      {
        name: "",
        value: outSplitValue,
        itemStyle: {
          color: "transparent",
          opacity: 0,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        tooltip: {
          show: false,
        }
      }
    );

    return arr;
  }, []);
  // const legendArr = []
  // outValueData.forEach((item, i) => {
  //   legendArr.push({
  //     selectedMode: false,
  //     type: 'plain',
  //     orient: 'horizontal',
  //     // bottom: `${(i + 1) * 5}%`,
  //     data: [
  //       {
  //         name: item.name,
  //         icon: 'rect',
  //       }
  //     ],
  //     // itemWidth: 50,
  //     padding: [2, 2, 2, 7],
  //     backgroundColor: '#1d2d3a',
  //     formatter: (name) => {
  //       return `{name|${name}}\n {bfb|${((outValueData[i].value / total)*100).toFixed(2)}%}`
  //     },
  //     textStyle: {
  //       color: 'rgba(216, 240, 255, 0.8)',
  //       fontSize: 12,
  //       fontFamily: 'PingFang-SC-Regular',
  //       rich: {
  //         name: {
  //           padding: [4, 4],
  //           align: 'left',
  //         },
  //         bfb: {
  //           padding: [4, -100, 0, 0],
  //           align: 'right',
  //         }
  //       }
  //     },
  //   })
  // })

  const option = {
    color: colors,
    // legend: legendArr,
    // legend: {
    //   orient: 'horizontal',
    //   bottom: -5,
    //   textStyle: {
    //     color: 'rgba(216, 240, 255, 0.8)',
    //     fontSize: 12,
    //     fontFamily: 'PingFang-SC-Regular',
    //     width: 70,
    //     backgroundColor: '#1d2d3a',
    //     padding: [2, 2, 2, 7],
    //     formatter: function (name) {
    //       console.log(name)

    //     }
    //   },
    // },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        lineStyle: {
          color: 'rgba(233, 254, 244, 0.5)',
        },
      },
      backgroundColor: '#040b15',
      borderColor: "#159AFF",
      padding: [5, 10],
      textStyle: {
        color: '#fff',
      },
      formatter: (params, ticket, callback) => {
        if (params.name) {
          return `${params.name}:${params.value}`;
        }
      },
    },
    series: [
      {
        type: "pie",
        tooltip: {
          show: true,
        },
        startAngle: -360 * (itemReduced / 2 / valueTotal) + 90,
        radius: ["50%", "60%"],
        center: ['50%', '35%'],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
          length: 10,
        },
        data: outValueData,
      },
    ],
  };
</script>
<style scoped lang="scss"></style>
